<template>
    <n-row>
      <n-col :span="12">
        <n-space style="margin-bottom: 10px">
          <n-input v-model:value="searchWord" placeholder="请输入模型名称" style="width: 200px">
          </n-input>
          <n-input v-model:value="searchModel" placeholder="请输入模型类型" style="width: 200px">
          </n-input>
          <n-button type="primary"  :on-click="getList">查询</n-button>
        </n-space>
        <n-spin :show="tableLoading">
          <n-scrollbar style="max-height: 120px;padding-bottom: 10px;">
            <n-space>
              <n-tag v-for="tag in tagList" v-model:checked="tag.checked" checkable :bordered="true" @click="showImage">
                <n-ellipsis style="max-width: 200px">
                  {{tag.modelName}}
                </n-ellipsis>
              </n-tag>
            </n-space>
          </n-scrollbar>
        </n-spin>
        <n-scrollbar
            :style="{height: clientHeight - (layoutHeaderHeight  + tabsHeight + 262) + 'px'}">
          <n-image v-for="image in modelImageList"
                   preview-disabled
                   :lazy="true"
                   :height="100"
                   size="small"
                   @click="selectedPic = image ; imgPicMetaObj=JSON.parse(image.meta)"
                   :class="{ 'selected': image.url == selectedPic?.url }"
                   style="margin-left: 10px;"
                   :src=image.url
          >

          </n-image>
        </n-scrollbar>
      </n-col>
      <n-col :span="12" v-if="imgPicMetaObj!=null">
        <n-row>
          <n-col :span="16">
            <n-space justify="center" >
              <n-image
                  :src= selectedPic?.url
                  width="400"
              >
              </n-image>
            </n-space>
          </n-col>
          <n-col :span="8">
              <n-form-item label="Prompt" >
                <n-input type="textarea" :value="imgPicMetaObj.prompt" style="width: 100%;">
                </n-input>
              </n-form-item>
              <n-form-item label="Negative prompt">
                <n-input type="textarea" :value="imgPicMetaObj.negativePrompt">
                </n-input>
              </n-form-item>
              <n-form-item label="Sampler">
                <n-input  :value="imgPicMetaObj.sampler">
                </n-input>
              </n-form-item>
                <n-form-item label="CFG scale">
                  <n-input  :value="imgPicMetaObj.cfgScale">
                  </n-input>
                </n-form-item>
                <n-form-item label="Steps">
                  <n-input  :value="imgPicMetaObj.steps">
                  </n-input>
                </n-form-item>
                <n-form-item label="Seed">
                  <n-input  :value="imgPicMetaObj.seed">
                  </n-input>
                </n-form-item>

                <n-button block type="primary" @click="emitLoadConfigEvent">加载配置</n-button>
          </n-col>
        </n-row>

      </n-col>
    </n-row>


</template>

<script setup lang="ts">
import {h, onMounted, reactive, ref, watch} from "vue";
import {NButton, NTag} from "naive-ui";
import {promptControllerApi} from '@/api/prompt/prompt.api'
import {defineEmits} from "vue/dist/vue";
import {civitaiController} from "@/api/controller/civitai/civitaiController";
import {storeToRefs} from "pinia";
import {useSystemStore} from "@/store/modules/useSystemStore";
const {
  clientHeight,
  layoutHeaderHeight,
  collapsed,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());

const props = defineProps({
  prompt:{
    type: String
  },
  negativePrompt:{
    type: String
  },
  type:{
    type:String
  },
  code:{
    type:String
  }
})

const tagList = ref([])
const tableLoading = ref(false)
const searchWord = ref('')
const searchModel = ref('')
const modelImageList = ref([])
const selectedPic = ref()
const imgPicMetaObj = ref()

onMounted(()=>{
  getList()
  showImage()
})

const getList = () =>{
  tableLoading.value = true
  const data = {
    modelName : searchWord.value,
    modelType : searchModel.value
  }
  civitaiController.modelList(data,{
    page: 0,
    pageSize: 1000
  }).then((res)=>{
    tableLoading.value = false
    if(res.code === 200){
      tagList.value = res.data.list
    }
  }).catch((e: any) => {
    tableLoading.value = true
  })
}

const showImage = () =>{
  const ids = tagList.value.filter((item:any) => {
    console.log(item)
    return item.checked == true
  }).map((item:any) => {
    return item.id
  }).join(",")
  civitaiController.getImagePrompt(ids).then((res)=>{
    if(res.code === 200){
      console.log(res.data)
      modelImageList.value = res.data
    }
  })
}


const emit = defineEmits()
const emitLoadConfigEvent = () =>{
  emit('loadConfigEvent',imgPicMetaObj.value)
}

</script>

